<template>
  <div id="List">
    <div
      v-if="contentData.length == 0"
      style="text-align: center; padding-top: 20vh"
      :style="{ height: nowIndex == 0 ? '70vh' : '86.6vh' }"
    >
      <div style="margin-bottom: 10px">
        <img src="https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/DSF/50.png" />
      </div>
      <div>暂无数据</div>
    </div>
    <div
      class="content1"
      :style="{
        height: nowIndex == 0 ? '73.3vh' : 'calc(100vh - 112px)',
      }"
      v-else
    >
      <van-list v-model="loading" :finished="finished" :offset="4" finished-text="没有更多了" @load="onLoad">
        <div class="content" v-for="(item, index) in contentData" :key="index">
          <div class="listItem" data-type="0">
            <div class="list" @touchstart.capture="touchStart" @touchend.capture="touchEnd">
              <div style="margin-bottom: 4px">
                <p style="font-weight: bold; height: 30px">
                  <span style="float: left">户主姓名：{{ item.HOUSEAPPLICANT }}</span>
                </p>
                <p style="font-size: 14px; color: #848484; height: 30px">
                  <span style="float: left">联系电话：{{ item.APPLYPHONE || '暂无数据' }}</span>
                </p>
                <p style="clear: both; display: flex">
                  <img
                    style="margin-right: 10px"
                    src="https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/YPC/dingwei.png"
                  />
                  <span style="font-size: 14px; color: #007aff">{{ item.CONSTRUCITONADDRESS || '暂无数据' }}</span>
                </p>
              </div>
            </div>
            <div class="delete" v-if="nowIndex == 0" :data-index="index" @click="deleteInfo(item)">
              <span v-if="item.ISSelect">取消</span>
              <span v-else>选择</span>
            </div>
          </div>
        </div>
      </van-list>
    </div>
    <!-- <footer class="List_bottom">
      温馨提示:请左滑选择当前行数据！
    </footer> -->
    <van-popup v-model="shoulm">
      <div class="con_box">
        <h3>{{ text.title }}</h3>
        <p>{{ text.message }}</p>
        <div class="btnv">
          <span @click="handleClose()" v-if="text.btn.cancelText">
            {{ text.btn.cancelText }}
          </span>
          <span @click="handleOk()" v-if="text.btn.okText">
            {{ text.btn.okText }}
          </span>
        </div>
      </div>
    </van-popup>
    <van-popup v-model="shoulm1">
      <div class="con_box">
        <h3>{{ text1.title }}</h3>
        <p>{{ text1.message }}</p>
        <div class="btnv">
          <span @click="handleClose1()" v-if="text1.btn.cancelText">
            {{ text1.btn.cancelText }}
          </span>
          <span @click="handleOk1()" v-if="text1.btn.okText">
            {{ text1.btn.okText }}
          </span>
        </div>
      </div>
    </van-popup>
    <div>
      <div class="bottomBtn" @click="BtnSaveFormData">保存</div>
    </div>
  </div>
</template>
<script>
import { QuerySignCallback } from '@/utils/api'
import { v4 as uuidv4 } from 'uuid'
export default {
  data() {
    return {
      value: '',
      nowIndex: 0,
      loading: false,
      finished: true,
      shoulm1: false,
      objectData: {},
      shoulm: false,
      text: {
        title: '温馨提示',
        message: '请确认是否选择?',
        btn: {
          okText: '确定',
          cancelText: '取消',
        },
      },
      text1: {
        title: '温馨提示',
        message: '请确认是否取消选择?',
        btn: {
          okText: '确定',
          cancelText: '取消',
        },
      },
      ak: 'BDv3WGThhC19xh6bVCjALzUscGSWxzaS', //这里是密钥，秘钥去百度地图申请
      showPickerAQYH: false,
      showPickerQX: false,
      startX: 0, //触摸位置
      endX: 0, //结束位置
      moveX: 0, //滑动时的位置
      disX: 0, //移动距离
      deleteSlider: '', //滑动时的效果,使用v-bind:style="deleteSlider",
      BUILDTYPEcolumnQX: [],
      contentData: [],
      cityCode1: '441300000000',
      showPickerXZ: false,
      showPickerFWLX: false,
      BUILDTYPEcolumnFWLX: [],
      BUILDTYPEcolumnXZ: [],
      BUILDTYPEcolumnAQYH: [],
      CityColumns: [],
      cityCodeSCODE: '',
      fwlxNode: 0,
      index: 1,
      //已选择的row_guid
      select_Row_guid: [],
      formData: {
        QX: ' 区县',
        XZ: '乡镇',
      },
      showPickerZT: false,
      citycode2: '',
      ISZJF: '',
      ISZT: '',
      ISAQ: '',
      BUILDTYPEcolumnZT: [],
    }
  },
  methods: {
    SearchData() {},
    handleClose() {
      this.shoulm = false
    },
    handleClose1() {
      this.shoulm1 = false
    },
    handleOk(data) {
      this.handleButton()
    },
    handleOk1(data) {
      this.handleButton1()
    },
    BtnSaveFormData: async function () {
      //保存数据发送
      let newArr = JSON.parse(window.sessionStorage.getItem('formDataGJ'))
      let newS = JSON.parse(window.sessionStorage.getItem('LISTGJ'))
      let newD = JSON.parse(window.sessionStorage.getItem('select_Row_guid'))
      let uuid = uuidv4()
      newS.forEach((item) => {
        newD.forEach((it, index) => {
          if (item.ROW_GUID == it.ROW_GUID) {
            newD[index].PKID = item.PKID
          }
        })
      })
      newArr[0].TO_ROW_GUID = uuid

      //请求保存接口获取
      let params = {
        accessCode: '0fb3f6123d1b4fe6851c99532c463f6f',
        cityCode: window.localStorage.getItem('citycode') ? window.localStorage.getItem('citycode') : '441300000000',
        params: {
          dataGuid: '42430760-e619-4eb9-80d8-4c89b5997dfb',
          strParams: JSON.stringify(newArr),
        },
      }
      const res1 = await QuerySignCallback(params)
      if (JSON.parse(res1.data.data).Success == true) {
      }
      newD.forEach(async (item, index) => {
        let paerssend2 = {
          procName: 'up_addhouse_CraftsmanHandleList',
          dtParams: JSON.stringify([
            {
              I_PKID: item.PKID,
              I_TO_ROW_GUID: uuid,
              I_GJXM: newArr[0].GJXM,
              I_GJZJH: newArr[0].GJZJH,
              I_GJSJH: newArr[0].GJSJH,
              I_GJDBRXM: newArr[0].GJDBRXM,
              I_GJDBRLXDH: newArr[0].GJDBRLXDH,
              I_GJDBRZJH: newArr[0].GJDBRZJH,
              I_GJID: item.GJID,
            },
          ]),
          token: window.localStorage.getItem('token'),
        }
        let paramsendMEssage2 = {
          accessCode: '69db6bece3a7480592e2ec753d1e335e',
          cityCode: window.localStorage.getItem('citycode') ? window.localStorage.getItem('citycode') : '441300000000',
          params: paerssend2,
        }
        const reqwmsg2 = await QuerySignCallback(paramsendMEssage2)
        if (newD.length == index + 1) {
          if (JSON.parse(reqwmsg2.data.data).Data) {
            this.$toast.success('保存成功')
            this.$router.push({ path: '/ZLJIndex' })
          } else {
            this.$toast.fail('保存失败')
          }
        }
      })
      // newArr[0].ROW_GUIDLIST = JSON.parse(
      //   window.sessionStorage.getItem("select_Row_guid")
      // )
      // if (JSON.parse(res1.data.data).Success == true) {
      //   this.$toast.success("保存成功");
      //   this.$router.push({ path: '/ZLJIndex', });
      // } else {
      //   this.$toast.fail("保存失败");
      // }
    },
    // 滑动开始
    touchStart(e) {
      // 记录初始位置
      if (this.nowIndex == 0) {
        this.startX = e.touches[0].clientX
      }
    },
    handleButton(data) {
      if (data == '取消') {
        this.show1 = false
      } else {
        this.deleteListData()
      }
    },
    handleButton1(data) {
      if (data == '取消') {
        this.show1 = false
      } else {
        this.deleteListData1()
      }
    },
    // 滑动结束
    touchEnd(e) {
      // 当前滑动的父级元素
      let parentElement = e.currentTarget.parentElement
      // 记录结束位置
      this.endX = e.changedTouches[0].clientX
      // 左滑
      if (parentElement.dataset.type == 0 && this.startX - this.endX > 100) {
        this.restSlide()
        parentElement.dataset.type = 1
      }
      // 右滑
      if (parentElement.dataset.type == 1 && this.startX - this.endX < -30) {
        this.restSlide()
        parentElement.dataset.type = 0
      }
      this.startX = 0
      this.endX = 0
    },

    // 复位滑块
    restSlide() {
      let listItems = document.querySelectorAll('.listItem')
      for (let i = 0; i < listItems.length; i++) {
        // 复位
        listItems[i].dataset.type = 0
      }
    },

    // 判断当前是否有滑块处于滑动状态
    checkSlide() {
      let listItems = document.querySelectorAll('.listItem')
      for (let i = 0; i < listItems.length; i++) {
        if (listItems[i].dataset.type == 1) {
          return true
        }
      }
      return false
    },

    // 删除
    deleteInfo(index) {
      if (index.ISSelect) {
        this.shoulm = false
        this.shoulm1 = true
      } else {
        this.shoulm = true
        this.objectData = index
      }
    },
    deleteListData: async function () {
      //标记被选择的内容
      var newArr = []
      if (this.select_Row_guid.length <= 4) {
        this.objectData.ISSelect = true
        this.select_Row_guid.push(this.objectData)
        this.select_Row_guid.forEach((item) => {
          if (!!item) {
            newArr.push(item)
          }
        })
        window.sessionStorage.setItem('select_Row_guid', JSON.stringify(newArr))
        this.shoulm = false
        this.$toast.success(`已选择${newArr.length}条数据`)
      } else {
        this.$toast.fail(`暂不支持同时代办5个以上件`)
      }
      //重新刷新
    },
    deleteListData1: async function () {
      //标记被选择的内容
      let newArr = []
      this.objectData.ISSelect = false
      this.select_Row_guid.forEach((item, index) => {
        if (item.ROW_GUID == this.objectData.ROW_GUID) {
          delete this.select_Row_guid[index]
          // this.select_Row_guid.splice(index,this.objectData.ROW_GUID)
        }
      })
      this.select_Row_guid.forEach((item) => {
        if (!!item) {
          newArr.push(item)
        }
      })
      //   this.select_Row_guid.push(this.objectData.ROW_GUID)
      window.sessionStorage.setItem('select_Row_guid', JSON.stringify(newArr))
      this.shoulm1 = false
      this.$toast.success(`已取消选择`)
      //重新刷新
    },
    onLoad() {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
    },
  },
  mounted() {
    this.contentData = JSON.parse(window.sessionStorage.getItem('LISTGJ'))
    //遍历数组添加标识
    this.contentData.forEach((item) => {
      item.ISSelect = false
    })
  },
}
</script>
<style lang="scss" scoped >
#List {
  height: 80vh;
  overflow: auto;
  background: #ffffff;
  .goods-card {
    margin: 0;
    background-color: white;
  }

  .delete-button {
    height: 100%;
  }
  /*font-size: 14px;*/
  .showSelectTop {
    display: flex;
    justify-content: space-between;
    .showSelect {
      // color: #d2d2d2;
    }
  }
  .title {
    width: 100%;
    height: 50px;
    background: #007aff;
    line-height: 50px;
    text-align: center;
    color: #ffffff;
    font-size: 20px;
    position: relative;
  }
  .content1 {
    // height: calc(100vh - 188px);
    overflow: auto;
    padding: 10px;
    // ul li div:first-of-type {
    //   float: left;
    //   width: 80%;
    // }
    .content {
      margin-top: 0.0778rem;
      padding: 0 0.2778rem;
      background-color: #ffffff;
      border-bottom: 1px solid #d9daeb;
      position: relative;
      overflow: hidden;
    }

    .listItem {
      position: relative;
      // 左滑动画效果
      -webkit-transition: all 0.2s;
      transition: all 0.2s;
      text-align: left;
    }

    // 左滑动画效果
    .listItem[data-type='0'] {
      transform: translate3d(0, 0, 0);
    }
    .listItem[data-type='1'] {
      transform: translate3d(-1.555rem, 0, 0);
    }
    .listItem:after {
      -webkit-transform-origin: 0 100%;
      transform-origin: 0 100%;
      -webkit-transform: scaleY(0.5);
      transform: scaleY(0.5);
      z-index: 2;
    }

    .list {
      overflow: hidden;
      position: relative;
    }

    .delete {
      padding: 0 20px;
      height: 100%;
      // width: 1rem;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #ff4d4d;
      border-bottom: 3px solid #ff4d4d;
      color: #ffffff;
      font-size: 16px;
      position: absolute;
      top: 0;
      right: -84px;
    }
    ul li {
      height: 95px;
      width: 124%;
      border-bottom: 1px solid #d2d2d2;
      margin-bottom: 10px;
      .btn {
        float: right;
        padding: 5% 0;
        width: 15%;
        background: #ff0000;
      }
    }
  }
  .van-popup {
    border-radius: 10px;
    .con_box {
      width: 270px;
      line-height: 1;
      text-align: center;
      color: #4d5c82;
      padding: 15px;
      box-sizing: border-box;
      > h3 {
        font-size: 20px;
        margin-top: 10px;
        margin-bottom: 20px;
      }
      > p {
        font-size: 17px;
        margin-bottom: 30px;
      }
      .btnv {
        display: flex;
        justify-content: space-between;
        > span {
          display: block;
          width: 114px;
          background-color: #e0e5f5;
          text-align: center;
          line-height: 44px;
          font-size: 17px;
        }
        > span:last-of-type {
          background-color: #1288fe;
          color: #ffffff;
        }
      }
    }
  }
  .bottomBtn {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 50px;
    background: #007aff;
    line-height: 50px;
    text-align: center;
    color: #ffffff;
    font-weight: bold;
  }
  .List_bottom{
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
  }
}
</style>
